<template>
	<div class='hot'>
		<div class='hot-top'>
			<img src='http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png'>
			<span>本周热门榜单</span>
			<span class='hot-title'>全部榜单  ></span>
		</div>
		<ul class='hot-list'>
			<li class='hot-item' v-for="list in hotList" :key=list.id>
				<img :src="list.imgUrl" >
				<p class="hot-country">{{list.country}}</p>
				<p class="hot-mark">{{list.title}}</p>
				<p class='hot-price'><span>¥{{list.mark}}</span>起</p>
			</li>
			
		</ul>
	</div>
</template>
<script>
	export default{
        props:['hotList'],
		data:function(){
			return {
			}
		}
	}
</script>
<style scoped lang='stylus'>
@import '~css/common.styl';
.hot{
	margin-top:.2rem;
	background: #fff;
	font-size:.28rem;
}
.hot-top{
	padding:.2rem;
	position: relative;
}
.hot-top img{
	width:.3rem;
	height: .3rem;
}
.hot-top span{
	color:#212121;
	font-size:.32rem;
}
.hot-top span.hot-title{
	position: absolute;
	right:.2rem;
	color:#616161;
	font-size:.28rem;
}
.hot-list{
	background:#fff;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	height: 3.2rem;

}
.hot-item{
	display: inline-block;
	margin:0 .13rem;
	width:2.5rem;
	position:relative;
}
.hot-item img{
	display:block;
	width:100%;
	height:1.66rem;
	position:relative;
}
.hot-item .hot-country{
	position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    z-index: 10;
    width:100%;
	height:1.66rem;
    background-color: rgba(0,0,0,0.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: #fff;
    font-weight:700;
    font-size: 0.32rem;
}
.hot-item .hot-mark{
	height:0.6rem;
	padding:0.14rem 0 0 0;
	font-size:0.24rem;
	color:#333;
	display:-webkit-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	text-align:center;
	border:1px solid #f5f5f5;
}
.hot-item .hot-price{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
	height:0.4rem;
	font-size:0.28rem;
	color:#f40;
	border:1px solid #f5f5f5;
	border-top:0;
	padding:0.1rem 0;
}
.hot-item .hot-price span{
	font-weight:700;
}
</style>